@charset "utf-8";
@import "reset";
.sing_page{
    .icon_box{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            width: 100%;
            height: 274px;
            overflow: hidden;
            color: #fff;
            background: #fff;
 
    .sing_header{
           position: absolute; 
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 2;
            display: -webkit-box;
             -webkit-box-orient: vertical;
            overflow: hidden; 
            background: rgba(0,0,0,.5);
        .open_music{
            display: -webkit-box;
            -webkit-box-align: center;
            width: 100%;
            height: 48px;
            padding: 0 16px 0 14px;
            background: rgba(0,0,0,.2);
            color: #FFFFFF;
            img{
                width: 36px;
                margin-right:3px;
                display: block;
            }
            .text{
                -webkit-box-flex: 1;
                h3{
                    font-size: 14px;
                    
                }
                p{
                    font-size: 10px;
                }
            }
            a{
                display: block;
                line-height: 24px;
                padding: 0 12px;
                color: #FFFFFF;
                border: 1px solid #777;
                border-radius: 99px;
            }
        }
        .song_icon{
            width: 100%;
            display: -webkit-box;
            -webkit-box-align: center;
            margin-top: 17px;
            padding: 0 16px;
            .song_pic{
                width: 125px;
                margin-right: 10px;
                img{
                    width: 100%;
                    display: block;
                }
            }
            .song_title{
                color: #FFFFFF;
                h1{
                    font-size: 18px;
                    overflow: hidden;
                    font-weight: normal;
                }
                p{
                    font-size: 12px;
                    overflow: hidden;
                    margin-top: 8px;
                }
            }           
        }
        .bt_play{
                padding: 0 16px;
                height: 84px;
                display: -webkit-box;
                -webkit-box-align: center;
                a{
                    display: -webkit-box;
                    -webkit-box-align: center;
                    -webkit-box-pack: center;            
                    width: 170px;
                    line-height: 40px;
                    border-radius: 99px;
                    background: #31c27c;
                    text-align: center;
                    margin: auto;
                    color: #FFFFFF;
                    &::before{
                            content: "";
                            display: block;
                            height: 0;
                            width: 0;
                            margin-right: -3px;
                            border-color: transparent transparent transparent #fff;
                            border-width: 7px 11px;
                            border-style: solid;
                            border-radius: 2px;
                    }
                }
            }
        
    }
    
//  头部结束
    .bg_img{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            -webkit-transform: scale(1) translateZ(0);
            -webkit-filter: blur(36px);
    }
       }
       //头部
       //尾部
      .sing_list_wrap{
          position: absolute;
          top: 274px;
          width: 100%;
          .sing_header{
              line-height: 54px;
              margin-left: 16px;
              display: -webkit-box;
              -webkit-box-align: center;
              span{
                  font-size: 14px;
              }
              .all{
                  margin-left: 5px;
              }
          }
          .sing_list{
              overflow: hidden;
              ul{
                  li{
                      display: -webkit-box;
                      .sing_number{
                              display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-box-pack: center;
                                -webkit-box-align: center;
                                width: 45px;
                                margin-right: -16px;
                                span{
                                    font-size: 14px;
                                        color: #FF400B;
                                }
                      }
                      .song_box{
                                    position: relative;
    -webkit-box-flex: 1;
    display: -webkit-box;
    -webkit-box-align: center;
    padding: 10px 16px;
    overflow: hidden;
    .singer{
            -webkit-box-flex: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
        

                                h3{
                                    font-size: 16px;
                                    color: #000;
                                   font-weight: normal;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                }
                                p{
                                    display: -webkit-box;
                                    -webkit-box-align: center;
                                    overflow: hidden;
                                    max-width: 100%;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    color: #777777;
                                }
                                    }
                      }
                  }
              }
          }
      }
       
       //尾部结束
}
